import React, { useCallback, useState } from 'react'
import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import { EventsITF } from '@INTERFACES/Events'
import DBConfig from '@CONFIG/DBConfig'
import { LanguageType } from '@INTERFACES/Common'
import { convertPx, getNavBar } from '@UTILS/common'
import Images from '@ASSET/Images'
import LoginVerifyBtn from '@COMPONENTS/Button/LoginVerifyBtn'
import { onClickCustomBtn } from '@UTILS/customBtn'
import style from './PlanGuidDesc.module.scss'

interface Props {
  data: EventsITF[]
  language: LanguageType
  homePageSpotEvents: EventsITF[]
  height: string
  showLogin: () => void
  virtualHeight?:number
}

interface PlanGuidDescItemProps {
  item: EventsITF
  height: string
  language: LanguageType
}

interface HomeTopBtnProps {
  homePageSpotEvents?: EventsITF[]
  title: string
  showLogin?: () => void
  showBtn?: boolean
}

const onClickBtn = (homePageSpotEvents: EventsITF[], btnIndex: string) => {
  onClickCustomBtn(homePageSpotEvents[0], { btnType: '定制计划-主', btnIndex })
}
export const HomeTopBtn: React.FC<HomeTopBtnProps> = ({
  homePageSpotEvents, title, showLogin, showBtn,
}) => {
  const onClick = useCallback(() => {
    if (homePageSpotEvents) {
      onClickBtn(homePageSpotEvents, '定制计划-导航栏')
    }
  }, [homePageSpotEvents])
  return (
    <View className={style.titleContainer}>
      <Text className={style.titleText}>{title}</Text>
      {showBtn && (
        <LoginVerifyBtn onClick={onClick} showLogin={showLogin} loginSuccess={onClick}>
          <View
            className={style.topBtnContainer}
            onClick={onClick}
            style={{ height: convertPx(getNavBar().menuHeight) }}
          >
            <Image src={Images.home.icon_home_plan_btn_hand} className={style.btnIcon} />
            <Text className={style.topBtnText}>开始定制</Text>
          </View>
        </LoginVerifyBtn>
      )}
    </View>
  )
}
const PlanGuidDescItem: React.FC<PlanGuidDescItemProps> = ({ item, language, height }) => {
  const { BannerFileName } = item
  return (
    <Image
      src={`${DBConfig.staticBannerImageUrl}${BannerFileName?.[language]}`}
      className={style.image}
      mode="aspectFill"
      style={{ height }}
    />
  )
}
const PlanGuidDesc: React.FC<Props> = ({ data, homePageSpotEvents, language, height, showLogin, virtualHeight = 0 }) => {
  const [curIndex, setCurIndex] = useState(0)
  const onClick = useCallback(() => {
    onClickBtn(homePageSpotEvents, `定制计划-主${curIndex}`)
  }, [homePageSpotEvents, curIndex])
  const onChange = useCallback(e => {
    setCurIndex(e.detail.current)
  }, [])
  if (!Array.isArray(data) || data.length === 0) return null
  const isHasBtn = Array.isArray(homePageSpotEvents) && homePageSpotEvents.length > 0
  const title = isHasBtn ? homePageSpotEvents[0]?.Title?.[language] : ''
  const isOne = data.length === 1
  return (
    <View className={style.container}>
      <Swiper
        autoplay
        interval={3000}
        onChange={onChange}
        className={style.swiperView}
        style={{ height }}
        indicatorDots={false}
        circular={!isOne}
      >
        {
          data.map((item, idx) => (
            <SwiperItem key={`desc_${idx}`}>
              <PlanGuidDescItem language={language} item={item} height={height} />
            </SwiperItem>
          ))
        }
      </Swiper>
      {isHasBtn && (
        <View className={style.btn} style={{ paddingBottom: (`${virtualHeight}rpx`) }}>
          {!!title && (
            <View className={style.tipView}>
              <Text className={style.tipText}>{title.substr(0, 15)}</Text>
              <View className={style.tipIconView}>
                <Image src={Images.managePlan.icon_guide_tip} className={style.tipIcon} />
              </View>
            </View>
          )}
          <LoginVerifyBtn onClick={onClick} showLogin={showLogin} loginSuccess={onClick}>
            <View className={style.btnContainer}>
              <Text className={style.btnText}>开始测评，定制方案</Text>
            </View>
          </LoginVerifyBtn>
        </View>
      )}
      <Image src={Images.managePlan.icon_home_guide_down} className={style.arrow} style={{ marginBottom: (`${virtualHeight}rpx`) }} />
    </View>
  )
}

export default PlanGuidDesc
